<script setup>
import { WebtopoSvgEdit,WebtopoSvgPreview } from 'webtopo-svg-edit';
import 'vue-webtopo-svgeditor/dist/style.css';
const prview_data = ref();
const saveSvgInfo = (e) => {
  console.log(e);
}
const edit = ref(true);
const a={
  "layout_center": {
    "x": 0,
    "y": 0
  },
  "config": {
    "background_color": "#fff",
    "scale": 1,
    "position_center": {
      "x": -333,
      "y": -250
    },
    "svg_position_center": {
      "x": 50,
      "y": 50
    },
    "grid": true,
    "ruler": true
  },
  "done_json": [
    {
      "id": "circuit-breakerywT7tOVXxS",
      "x": 642,
      "y": 232,
      "client": {
        "x": 642,
        "y": 232
      },
      "scale_x": 1,
      "scale_y": 1,
      "rotate": 0,
      "actual_bound": {
        "x": 23.1640625,
        "y": 19.375,
        "width": 61.201171875,
        "height": 64.033203125
      },
      "point_coordinate": {
        "tl": {
          "x": 611.3994140625,
          "y": 199.9833984375
        },
        "tc": {
          "x": 642,
          "y": 199.9833984375
        },
        "tr": {
          "x": 672.6005859375,
          "y": 199.9833984375
        },
        "l": {
          "x": 611.3994140625,
          "y": 232
        },
        "r": {
          "x": 672.6005859375,
          "y": 232
        },
        "bl": {
          "x": 611.3994140625,
          "y": 264.0166015625
        },
        "bc": {
          "x": 642,
          "y": 264.0166015625
        },
        "br": {
          "x": 672.6005859375,
          "y": 264.0166015625
        }
      },
      "name": "circuit-breaker",
      "title": "断路器",
      "type": "File",
      "config": {
        "can_zoom": true,
        "have_anchor": true,
        "actual_rect": true
      },
      "display": true,
      "props": {},
      "state": {
        "OnOff": {
          "title": "开关",
          "default": false,
          "props": {
            "fill": {
              "openVal": "#00ff00",
              "closeVal": "#ff0000"
            },
            "fill-opacity": {
              "openVal": "0",
              "closeVal": "1"
            }
          }
        }
      },
      "common_animations": {
        "val": "",
        "delay": "delay-0s",
        "speed": "slow",
        "repeat": "infinite"
      }
    }
  ]
}
</script>

<template >
  <webtopo-svg-preview :data-model="a" :canvas-drag="true" class="a"></webtopo-svg-preview>
</template>

<style scoped>
.a{
  height:100vh
}
</style>

